<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>新建门店</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-upload
                        ref="uploadRef"
                        class="avatar-uploader"
                        :show-file-list="false"
                        :auto-upload="true"
                        action="/api/upload"
                        name="file"
                        :on-success="uploadSuccess"
                >

                    <img v-if="shop.shopImg" :src="shop.shopImg" class="avatar" style="width: 300px"/>
                    <img v-else src="@/assets/cover.jpg" width="350" />
                </el-upload>
                <br />

                <div class="button-container">
                    <el-button type="primary" :icon="Plus" size="large" @click="uploadRef.$el.querySelector('input').click()">
                        选择图片
                    </el-button>

                </div>
            </el-col>

        </el-row>
        <div class="upload-details">
            <div class="video-name" style="margin-top: 20px">
                <label for="name">门店名称：</label>
                <input id="name" type="text" v-model="shop.shopName">
            </div>
        </div>
        <el-button type="success" style="margin-left: 100px;margin-top: 20px" @click="create">创建</el-button>


    </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import { Plus, Upload } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import router from "@/router";
import {createShop} from "@/api/business";
const uploadRef=null
const shop=ref({
    shopImg:"",
    shopName:""
})

function uploadSuccess(result){
    shop.value.shopImg=result.data
}

async function create() {
    await createShop(shop.value)
    ElMessage.success('创建成功')
    shop.value.shopImg=""
    shop.value.shopName=""
}

</script>

<style  scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }

  }
}


.button-container {
  margin-top: 10px; /* 调整按钮之间的垂直间距 */
  display: flex;
  margin-left: 20px;
  //justify-content: space-around; /* 调整按钮之间的水平间距 */
}
</style>